<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
     <button class='layui-btn layui-btn-normal' id='add'>添加一行</button>    
     <button class='layui-btn layui-btn-danger' id='del'>删除一行</button>    
       <hr>
       <table class='layui-table'>
           <thead>
               <th>标头1</th>
               <th>标头2</th>
               <th>标头3</th>
               <th>标头4</th>
               <th>标头5</th>
               <th>标头6</th>
           </thead>
           <tbody>
               <tr>
                   <td>内容1</td>
                   <td>内容2</td>
                   <td>内容3</td>
                   <td>内容4</td>
                   <td>内容5</td>
                   <td>内容6</td>
               </tr>
               <tr>
                   <td>内容1</td>
                   <td>内容2</td>
                   <td>内容3</td>
                   <td>内容4</td>
                   <td>内容5</td>
                   <td>内容6</td>
               </tr>
               <tr>
                   <td>内容1</td>
                   <td>内容2</td>
                   <td>内容3</td>
                   <td>内容4</td>
                   <td>内容5</td>
                   <td>内容6</td>
               </tr>
               <tr>
                   <td>内容1</td>
                   <td>内容2</td>
                   <td>内容3</td>
                   <td>内容4</td>
                   <td>内容5</td>
                   <td>内容6</td>
               </tr>
               <tr>
                   <td>内容1</td>
                   <td>内容2</td>
                   <td>内容3</td>
                   <td>内容4</td>
                   <td>内容5</td>
                   <td>内容6</td>
               </tr>
               <tr>
                   <td>内容1</td>
                   <td>内容2</td>
                   <td>内容3</td>
                   <td>内容4</td>
                   <td>内容5</td>
                   <td>内容6</td>
               </tr>
           </tbody>
       </table>
</body>
</html>
<script src='./lib/jquery.min.js'></script>
<script>
    $(()=>{
         //添加一行
        $('#add').click(()=>{
            $(`<tr>
                   <td><input type="text"></td>
                   <td><input type="text"></td>
                   <td><input type="text"></td>
                   <td><input type="text"></td>
                   <td><input type="text"></td>
                   <td><input type="text"></td>
               </tr>`).appendTo('tbody');
        });

//删除
$("#del").click(()=>{
        $("tbody tr:last").remove();
    });
   //给td添加双加事件(凡是后添加的元素要绑定事件)
   //一定要使用事件委托
    $("tbody").on("dblclick","td",function(){
        //alert("111");
        //获得td中的内容
       let val= $(this).html();
       $(this).html(`<input type='text' value=${val}>`);
    })

    //给input 绑定失去焦点和键盘事件
    $("tbody").on('blur keydown','input',function(e){
       // console.log(e.type);
       if(e.type==='focusout'||e.keyCode==13){
            //获得输入框的值
            let val = $(this).val();
            //在input的父元素td上写入val的值
            $(this).parent().html(val);
       }
    })


    })
    


</script>